import {
  BlockOutlined,
  CopyOutlined,
  DeleteOutlined,
  DownOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  RedoOutlined,
  UndoOutlined,
  UpOutlined,
} from '@ant-design/icons'
import { Button, Space, Tooltip } from 'antd'
import { FC } from 'react'
import { useDispatch } from 'react-redux'
import { componentAction } from '../../../store/components-reducer'
import useGetComponentInfo from '../hooks/useGetComponentInfo'
import { ActionCreators } from 'redux-undo'

const EditToolbar: FC = () => {
  const dispatch = useDispatch()
  const { selectedId, selectedComponent, copiedComponent, componentList } = useGetComponentInfo()
  const { isLocked } = selectedComponent || {}
  const length = componentList.length
  const selectedIndex = componentList.findIndex(c => c.fe_id === selectedId)

  const isFirst = selectedIndex <= 0
  const isLast = selectedIndex + 1 >= length

  function handleDelete() {
    dispatch(componentAction.removeSelectedComponent())
  }

  function handleHidden() {
    dispatch(componentAction.changeComponentHidden({ fe_id: selectedId, isHidden: true }))
  }

  function handleLock() {
    dispatch(componentAction.toggleComponentLock(selectedId))
  }

  function handleCopy() {
    dispatch(componentAction.copySelectedComponent())
  }

  function handlePaste() {
    dispatch(componentAction.pasteCopiedComponent())
  }

  function handleMoveUp() {
    if (isFirst) return
    dispatch(componentAction.moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex - 1 }))
  }

  function handleMoveDown() {
    if (isLast) return
    dispatch(componentAction.moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex + 1 }))
  }

  function handleUndo() {
    dispatch(ActionCreators.undo())
  }

  function handleRedo() {
    dispatch(ActionCreators.redo())
  }

  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined />} onClick={handleDelete} />
      </Tooltip>
      <Tooltip title="隐藏">
        <Button shape="circle" icon={<EyeInvisibleOutlined />} onClick={handleHidden} />
      </Tooltip>
      <Tooltip title="锁定">
        <Button shape="circle" icon={<LockOutlined />} onClick={handleLock} type={isLocked ? 'primary' : 'default'} />
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} onClick={handleCopy} />
      </Tooltip>
      <Tooltip title="粘贴">
        <Button shape="circle" icon={<BlockOutlined />} onClick={handlePaste} disabled={!copiedComponent} />
      </Tooltip>
      <Tooltip title="上移">
        <Button shape="circle" icon={<UpOutlined />} onClick={handleMoveUp} disabled={isFirst} />
      </Tooltip>
      <Tooltip title="下移">
        <Button shape="circle" icon={<DownOutlined />} onClick={handleMoveDown} disabled={isLast} />
      </Tooltip>
      <Tooltip title="撤销">
        <Button shape="circle" icon={<UndoOutlined />} onClick={handleUndo} />
      </Tooltip>
      <Tooltip title="重做">
        <Button shape="circle" icon={<RedoOutlined />} onClick={handleRedo} />
      </Tooltip>
    </Space>
  )
}

export default EditToolbar
